<template>
  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <!-- <el-form-item label="创建时间">
            <el-date-picker
              v-model="dateRange"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item> -->
      <el-form-item label="开始日期" prop="startTime">
        <el-date-picker :style="{ width: '182.5px' }" v-model="queryParams.startTime" type="datetime" placeholder="开始日期"
          format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束日期" prop="endTime">
        <el-date-picker :style="{ width: '182.5px' }" v-model="queryParams.endTime" type="datetime" placeholder="结束日期"
          format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row v-if="modality==='BA'" style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px">
      <h3>监控项波动</h3>
      <line-chart :chart-data="lineChartData" />
    </el-row>

<!--    <el-row v-if="modality==='BA'" style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px">-->
<!--      <h3>湿度监控项波动</h3>-->
<!--      <line-chart :chart-data="VChartData" />-->
<!--    </el-row>-->

    <el-table
      v-if="modality==='MR'"
      v-loading="loading"
      :data="deviceList"
    >

      <el-table-column label="序号" align="center" prop="id" width="60">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备地址代号_序号" align="center" prop="boxCode">
      </el-table-column>
      <el-table-column label="设备采集值" align="center" prop="metricValue" />
      <el-table-column label="设备类型" align="center" prop="pointCode" >
      </el-table-column>
      <el-table-column label="数据接收时间" align="center" prop="reportTime">

      </el-table-column>

    </el-table>

    <pagination
      v-if="modality==='MR'"
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

  </div>
</template>

<script>

import LineChart from "../../dashboard/LineChart"

import { queryChatData, listPointvalue } from "@/api/system/monitor";
import format from '@/plugins/format.js'

export default {
  name: "Data",
  dicts: ['sys_normal_disable'],
  components: {
    LineChart,
  },
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      lineChartData: {},
      VChartData: {},
      dateRange:[],
      systemId: this.$route.query.systemId,
      modality: this.$route.query.modality,
      unit: this.$route.query.unit,
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 设备表格数据
      deviceList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        boxCode: '',
        pointCode: '',
        startTime: new Date,
        endTime: new Date,
      },
    };
  },
  mounted() {
    this.handleQuery();
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.boxCode = this.systemId;
      // this.queryParams.startTime = this.dateRange[0];
      // this.queryParams.endTime = this.dateRange[1];
      this.queryParams.startTime = format(  this.queryParams.startTime, 'YYYY-MM-DD HH:mm:ss');
      this.queryParams.endTime = format(  this.queryParams.endTime, 'YYYY-MM-DD HH:mm:ss');
      if (this.modality === 'MR'){
        this.getList();
      } else {
        this.getLineData();
        // this.getVChartData();
      }

    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams = {
        boxCode: '',
        pointCode: '',
        startTime: new Date,
        endTime: new Date,
      };
    },
    getList() {
      this.loading = true;
      this.queryParams.pointCode = 'KG';
      listPointvalue(this.queryParams).then((response) => {
        this.deviceList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    async getLineData() {
      try {
        this.queryParams.pointCode = this.unit;
        const res = await queryChatData(this.queryParams);
        if (res?.code === 200 && res?.data) {
          this.lineChartData = {
            xAxis: {
              name: '时间',
              data: res.data?.xData?.map((item) => item),
            },
            yAxis: {
              name: this.unit,
              type: 'value',
              min: -20, // 配置 Y 轴刻度最小值
              max: 50,  // 配置 Y 轴刻度最大值
              splitNumber: 1,  // 配置 Y 轴数值间隔
            },
            // dataZoom: [{
            //   show: true,
            //   endValue: 9//x轴少于10个数据，则显示全部，超过10个数据则显示前10个。
            // }],
            legend: {
              data: res.data?.pointName,
            },
            // 多组数据
            // series: res.data?.deviceMonitorData?.map((item) => ({
            //   name: item.pointName,
            //   // smooth: true,
            //   type: "line",
            //   data: item.data,
            //   // animationDuration: 2800,
            //   // animationEasing: "cubicInOut",
            // })),

            // 单组数据
            series: {
              name: res.data?.pointName,
              type: "line",
              data: res.data?.data,
            }
          };
        }
      } catch (error) {
        throw error;
      }
    },
    async getVChartData() {
      try {
        this.queryParams.pointCode = 'V';
        const res = await queryChatData(this.queryParams);
        if (res?.code === 200 && res?.data) {
          this.VChartData = {
            xAxis: {
              data: res.data?.xData?.map((item) => item),
            },
            yAxis: {
              name: '湿度',
              type: 'value',
              min: 0, // 配置 Y 轴刻度最小值
              max: 100,  // 配置 Y 轴刻度最大值
              splitNumber: 1,  // 配置 Y 轴数值间隔
            },
            legend: {
              data: res.data?.pointName,
            },
            series: {
              name: res.data?.pointName,
              type: "line",
              data: res.data?.data,
            }
          };
        }
      } catch (error) {
        throw error;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
